<script setup>
import { ref, watch, watchEffect } from "vue";
const msg = ref("hi");
const user = ref({
  name:"jay",
  age:'18',
  hobby:["css","vue","music"]
})

const ck = () => {
  msg.value = "咯咯哒";
  user.value.hobby.push('html');
};
// 使用watch来监听输入框的变化，只要变化就做一些额外的事情
// watch（监听的数据，执行的回调函数）
watch(msg,(newVal,oldVal)=>{

  console.log('基本数据类型：');
  console.dir('新值:'+newVal);
  console.dir('旧值:'+oldVal);
 
})
watch(user,(newVal,oldVal)=>{
  console.log('引用数据类型：');
  console.log(newVal.hobby);
  console.log(oldVal.hobby);
  // 要使用第三个参数实现深度监听
},{
  deep:true,
  // 立即执行
  // immediate:true,
})
// 监听响应式数据
// 默认立即执行，自动监听回调函数里面使用到的响应式数据
watchEffect(()=>{
  console.log(user);
  console.log(msg);
})

/*
在实际项目中，优先使用watch，对指定数据进行精准的监听，性能更好
watchEffect适合特定的场景下使用它的性能比watch更低一点
*/
</script>

<template>
  <div>
    <h2>基本数据类型：{{ msg }}</h2>
    <p><input type="text" v-model="msg"></input></p>
    <h2>引用数据类型：{{ user.hobby }}</h2>
    <p><input type="text" v-model="user.hobby"></input></p>
    <p><button @click="ck">点击</button></p>
  </div>
</template>

<style scoped></style>
